<template>
	<view class="thoughts">
		<view class="thoughtsCard" v-for="(item, index) in thoughtsList" :key="index" @click="seeWhich(item.id)"
			  :class="Math.floor(item.index/3)==0
						?(item.id%3==0
							?'cardClass00'
							:(item.index%3==1
								?'cardClass01'
								:'cardClass02'))
						:(item.id%3==0
							?'cardClass10'
							:(item.index%3==1
								?'cardClass01'
								:'cardClass12'))"
								
				:style="{top: Math.floor(item.index/3) == 0
								?''
								:item.index%3==0
									?item.index*(-20)+'rpx'
									:item.index%3==2
										?item.index*(-6) + 'rpx'
										:''}">
				
				<view class="coverBox">
					<image class="thoughtsCover" :src="item.coverUrl"/>
				</view>
			
			<view class="introduce">
				<view class="title">
					{{item.title}}
				</view>
				
				<view class="interaction">
					<view class="like">
						<view class="Icon t-icon t-icon-dianzan"></view>
						<view>
							{{item.likeCount}}
						</view>
					</view>
					
					<view class="comment">
						<view class="Icon t-icon t-icon-pinglun"></view>
						<view>
							{{item.CommentCount}}
						</view>
					</view>
				</view>
				
				<p class="time">{{item.time}}</p>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			thoughtsList:{
				type: Array,
				default:{},
				required:false
			}
		},
		data(){
			return {
				cardHeight: undefined,
			}
		},
		methods:{
			seeWhich(goal){
				uni.navigateTo({
					url:"/pages/components/userHomeFrames/thoughtsDetail?id="+goal,
				})
				/*
				uni.request({
					method: 'GET',
					url:'',
					header: this.$store.state.loginUser.token,
					data:{
						thoughtsId: goal
					}
				})
				.then(res => {
					console.log(res)
					//吧获取到的动态信息传到store里userThoughtsData里去
				})
				*/
			}
		}
	}
</script>

<style scoped>
	.thoughts{
		width: 96vw;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		height: 100vh;
	}
	.thoughts .thoughtsCard{
		margin-top: 10rpx;
		width: calc(100%/3 - 8rpx);
		overflow: hidden;
		border-radius: 10rpx;
	}
	.thoughtsCover{
		width: 130rpx;
		height: 130rpx;
	}
	.cardClass00{
		height: 450rpx;
	}
	.cardClass01{
		height: 510rpx;
		margin-left: 12rpx;
		margin-bottom: 10rpx;
	}
	.cardClass02{
		height: 490rpx;
		margin-left: 12rpx;
	}
	.cardClass10{
		height: 450rpx;
		position: relative;
	}
	.cardClass12{
		height: 490rpx;
		margin-left: 12rpx;
		position: relative;
	}
	.coverBox{
		position: relative;
		width: 100%;
		height: 300rpx;
		top: 0;
		background-color: coral;
	}
	.coverBox>image{
		height: 300rpx;
		width: 100%;
	}
	.introduce{
		padding: 8rpx;
		position: relative;
		width: 100%;
		background-color: rgba(248, 252, 255, 1.0);
		height: calc(100% - 300rpx);
	}
	.title{
		display: -webkit-box;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		font-size: 0.85rem;
		overflow: hidden;
		font-weight: 400;
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}
	.time{
		position: absolute;	
		bottom: 35%;
		font-size: 0.8rem;
		color: grey;
		left: 10%;
	}
	.interaction{
		display: flex;
		position: absolute;
		justify-content: center;
		flex-direction: row;
		width: 70%;
		height: 25%;
		left: 30%;
		top: 70%;
	}
	.like{
		height: 100%;
		width: 40%;
		margin-right: 10%;
	}
	.like, .comment{
		display: flex;
		align-items: center;
	}
	.like>view, .comment>view{
		font-size: 0.8rem;
	}
</style>